<template>
    <div class="dashboard">
        <dv-full-screen-container>
            <dv-border-box-11 title="案件管理电子看板" class="border-11">
                <div class="dashboard-top">
                    <dv-border-box-12 class="border-12">
                        <div class="card-box">
                            <div class="card-box-item" v-for="item in cards" :key="item.id">
                                <dv-digital-flop :config="item.num" style="width:100px;height:50px;" />
                                <!-- <span>{{ item.num }}</span> -->
                                <span>{{ item.title }}</span>
                            </div>
                        </div>
                    </dv-border-box-12>
                </div>

                <div class="dashboard-bottom">
                    <div class="chart-box-l">
                        <dv-border-box-11 title="派出所提交案件(本月)">
                            <dv-scroll-board :config="commitCaseCfg" class="scroll-board" />
                        </dv-border-box-11>

                        <dv-border-box-11 title="民警提交TOP5(本月)">
                            <dv-scroll-board :config="commitPoliceCfg" class="scroll-board" />
                        </dv-border-box-11>
                    </div>

                    <div class="chart-box-c">
                        <dv-border-box-11 title="案件处理过程(实时)">
                            <dv-scroll-board :config="handleCaseCfg" class="scroll-board" />
                        </dv-border-box-11>
                    </div>

                    <div class="chart-box-r">
                        <div class="chart-box-rt">
                            <dv-border-box-11 title="案件分类汇总(本月)">
                                <pie-chart :chart-data="typeData" className="pie-chart" height="200px" />
                            </dv-border-box-11>
                        </div>

                        <div class="chart-box-rc">
                            <dv-border-box-11 title="案件完结情况(本月)">
                                <pie-chart :chart-data="doneData" className="pie-chart" height="200px" />
                            </dv-border-box-11>
                        </div>

                        <div class="chart-box-rb">
                            <dv-border-box-11 title="案件模版导出(本月)">
                                <pie-chart :chart-data="templateData" className="pie-chart" height="200px" />
                            </dv-border-box-11>
                        </div>
                    </div>
                </div>
            </dv-border-box-11>
        </dv-full-screen-container>
    </div>
</template>

<script>
import PieChart from '@/views/report/pieChart'

export default {
    components: {
        PieChart
    },
    data() {
        return {
            cards: [
                { id: 1, num: { number: [123], content: '{nt}' }, title: '已提交' },
                { id: 2, num: { number: [123], content: '{nt}' }, title: '已审批' },
                { id: 3, num: { number: [123], content: '{nt}' }, title: '办理中' },
                { id: 4, num: { number: [123], content: '{nt}' }, title: '已完结' },
            ],
            commitCaseCfg: {
                // header: ['派出所', '案件数'],
                data: [
                    ['派出所1', 100],
                    ['派出所2', 80],
                    ['派出所3', 44],
                    ['派出所4', 44],
                    ['派出所5', 44],
                ]
            },
            commitPoliceCfg: {
                // header: ['派出所', '民警', '案件数'],
                data: [
                    ['派出所1', '民警1', 100],
                    ['派出所2', '民警2', 80],
                    ['派出所3', '民警3', 44],
                    ['派出所4', '民警4', 44],
                    ['派出所5', '民警5', 44],
                ]
            },
            handleCaseCfg: {
                // header: ['时间', '派出所', '案件编号', '案件状态'],
                data: [
                    ['2024-03-10 10:30', '派出所1', '案件编号1', '已提交'],
                    ['2024-03-10 10:30', '派出所2', '案件编号2', '已审批'],
                    ['2024-03-10 10:30', '派出所3', '案件编号3', '办理中'],
                    ['2024-03-10 10:30', '派出所4', '案件编号4', '已完结'],
                    ['2024-03-10 10:30', '派出所5', '案件编号5', '已完结'],
                    ['2024-03-10 10:30', '派出所1', '案件编号1', '已提交'],
                    ['2024-03-10 10:30', '派出所2', '案件编号2', '已审批'],
                    ['2024-03-10 10:30', '派出所3', '案件编号3', '办理中'],
                    ['2024-03-10 10:30', '派出所4', '案件编号4', '已完结'],
                    ['2024-03-10 10:30', '派出所5', '案件编号5', '已完结'],
                ]
            },
            typeData: {
                // legendData: ['刑事案件', '行政案件', '其它'],
                seriesData: [
                    {
                        name: '分类汇总',
                        type: 'pie',
                        label: {
                            color: '#FFF'
                        },
                        // roseType: 'radius',
                        // radius: [15, 95],
                        // center: ['50%', '38%'],
                        data: [{ value: 100, name: '刑事案件' }, { value: 150, name: '行政案件' }, { value: 200, name: '其它' }],
                        animationEasing: 'cubicInOut',
                        animationDuration: 2600
                    }
                ]
            },
            doneData: {
                // legendData: ['已完结', '未完结'],
                seriesData: [
                    {
                        name: '完结情况',
                        type: 'pie',
                        label: {
                            color: '#FFF'
                        },
                        // roseType: 'radius',
                        // radius: [15, 95],
                        // center: ['50%', '38%'],
                        data: [{ value: 100, name: '已完结' }, { value: 150, name: '未完结' }],
                        animationEasing: 'cubicInOut',
                        animationDuration: 2600
                    }
                ]
            },
            templateData: {
                // legendData: ['模版1', '模版2'],
                seriesData: [
                    {
                        name: '模版导出',
                        type: 'pie',
                        label: {
                            color: '#FFF'
                        },
                        // roseType: 'radius',
                        // radius: [15, 95],
                        // center: ['50%', '38%'],
                        data: [{ value: 100, name: '模版1' }, { value: 150, name: '模版2' }],
                        animationEasing: 'cubicInOut',
                        animationDuration: 2600
                    }
                ]
            }
        }
    },
    mounted() {
    },
    methods: {

    },
}

</script>

<style lang="scss" scoped>
.dashboard {
    width: 100%;
    height: 100%;
    background-color: #030409;
    color: #fff;

    #dv-full-screen-container {
        background-image: url('./img/bg.png');
        background-size: 100% 100%;
        box-shadow: 0 0 3px blue;
    }

    .border-11 {
        width: 100%;
        height: 100%;
        padding: 10px;
    }

    .border-12 {
        width: 100%;
        height: 200px;
    }

    &-top {
        width: 80%;
        padding-top: 60px;
        margin: 0 auto 30px;

        .card-box {
            width: 100%;
            height: 200px;
            display: flex;

            &-item {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                font-size: 30px;
            }
        }
    }

    &-bottom {
        display: flex;

        .chart-box-l,
        .chart-box-c,
        .chart-box-r {
            flex: 1;

            .scroll-board {
                width: 90%;
                box-sizing: border-box;
                height: 200px;
                margin: 0 auto;
                padding-top: 60px;
            }
        }

        .chart-box-l {
            height: 360px;
        }

        .chart-box-c {
            height: 720px;

            .scroll-board {
                height: 400px;
            }
        }

        .chart-box-r {

            .chart-box-rt,
            .chart-box-rc,
            .chart-box-rb {
                width: 100%;
                height: 220px;
                margin-bottom: 5px;

                .pie-chart {
                    width: 90%;
                    box-sizing: border-box;
                    margin: 0 auto;
                    height: 200px;
                    padding-top: 60px;
                }
            }
        }
    }
}
</style>
